<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Title</title>
    <link rel="stylesheet" href="__TMPL__/public/assets/css/mescroll.min.css">
    <link rel="stylesheet" href="__TMPL__/public/assets/css/mescroll-option.css">
    <script src="__TMPL__/public/assets/js/mescroll.min.js"></script>
    <script src="__TMPL__/public/assets/js/mescroll-option.js" type="text/javascript" charset="utf-8"></script>
    <script src="__TMPL__/public/assets/js/jquery.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            -webkit-touch-callout:none;
            -webkit-user-select:none;
            -webkit-tap-highlight-color:transparent;
        }
        body{background-color: white}
        ul{list-style-type: none}
        a {text-decoration: none;color: #18B4FE;}

        /*vue*/
        [v-cloak] {
            display: none;
        }

        /*模拟的标题*/
        .header{
            z-index: 9990;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 44px;
            line-height: 44px;
            text-align: center;
            border-bottom: 1px solid #eee;
            background-color: white;
        }
        .header .btn-left{
            position: absolute;
            top: 0;
            left: 0;
            padding:12px;
            line-height: 22px;
        }
        /*mescroll滚动的区域*/
        .mescroll{
            position: fixed;
            top: 44px;
            bottom: 0;
            height: auto;
        }
        /*展示上拉加载的数据列表*/
        .data-list li{
            position: relative;
            padding: 10px 8px 10px 120px;
            border-bottom: 1px solid #eee;
        }
        .data-list .pd-img{
            position: absolute;
            left: 18px;
            top: 18px;
            width: 80px;
            height: 80px;
        }
        .data-list .pd-name{
            font-size: 16px;
            line-height: 20px;
            height: 40px;
            overflow: hidden;
        }
        .data-list .pd-price{
            margin-top: 8px;
            color: red;
        }
        .data-list .pd-sold{
            font-size: 12px;
            margin-top: 8px;
            color: gray;
        }
    </style>
</head>
<body>
<div id="mescroll" class="mescroll">
    <!--展示上拉加载的数据列表-->
    <ul id="dataList" class="data-list">
        <li>
            <p class="pd-name">{{pd.post_title}}</p>
            <p class="pd-price">{{pd.post_id}} 元</p>
            <p class="pd-sold">已售{{pd.post_id}}件</p>
        </li>
    </ul>
</div>

<script type="text/javascript" charset="utf-8">
    $(function(){
        //创建MeScroll对象,内部已默认开启下拉刷新,自动执行up.callback,重置列表数据;
        var mescroll = new MeScroll("mescroll", {
            up: {
                callback: getListData, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); }
                isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
                clearEmptyId: "dataList", //1.下拉刷新时会自动先清空此列表,再加入数据; 2.无任何数据时会在此列表自动提示空
                toTop:{ //配置回到顶部按钮
                    src : "../res/img/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                    //offset : 1000
                }
            }
        });

        /*联网加载列表数据  page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
        function getListData(page){
            //联网加载数据
            getListDataFromNet(page.num, page.size, function(curPageData){
                //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
                //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
                console.log(curPageData);

                //方法一(推荐): 后台接口有返回列表的总页数 totalPage
                //mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)

                //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
                //mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)

                //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
                //mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)

                //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据,如果传了hasNext,则翻到第二页即可显示无更多数据.
                mescroll.endSuccess(curPageData.length);

                //设置列表数据,因为配置了emptyClearId,第一页会清空dataList的数据,所以setListData应该写在最后;
                setListData(curPageData);
            }, function(){
                //联网失败的回调,隐藏下拉刷新和上拉加载的状态;
                mescroll.endErr();
            });
        }

        /*设置列表数据*/
        function setListData(curPageData){
            var listDom=document.getElementById("dataList");
            for (var i = 0; i < curPageData.length; i++) {
                var pd=curPageData[i];
                var str='';
                str+='<p class="pd-name">'+pd.post_title+'</p>';
                str+='<p class="pd-price">'+pd.id+' 元</p>';
                str+='<p class="pd-sold">已售'+pd.id+'件</p>';

                var liDom=document.createElement("li");
                liDom.innerHTML=str;
                listDom.appendChild(liDom);
            }
        }

        var dataTag=1;
        $(".btn-change").click(function(){
            if (dataTag==1) {
                dataTag=2;
                $(this).html("已模拟后台修改信息 <b>2</b> , 请下拉刷新");
            } else{
                dataTag=1;
                $(this).html("已模拟后台修改信息 <b>1</b> , 请下拉刷新");
            }
        });

        /*联网加载列表数据
         在您的实际项目中,请参考官方写法: http://www.mescroll.com/api.html#tagUpCallback
         请忽略getListDataFromNet的逻辑,这里仅仅是在本地模拟分页数据,本地演示用
         实际项目以您服务器接口返回的数据为准,无需本地处理分页.
         * */
        function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
            //延时一秒,模拟联网
            setTimeout(function () {
                $.ajax({
                    type: 'GET',
                    url: '/portal/index/down',
//		                url: '../res/pdlist1.json?num='+pageNum+"&size="+pageSize,
                    dataType: 'json',
                    success: function(data){
                        //模拟分页数据
                        var listData=[];
                        for (var i = (pageNum-1)*pageSize; i < pageNum*pageSize; i++) {
                            if(i==data.length) break;
                            listData.push(data[i]);
                        }
                        successCallback(listData);
                    },
                    error: errorCallback
                });
            },1000)
        }

    });
</script>
</body>
</html>